<template>
  <div class="stats-container">
    <van-cell-group inset>
      <van-cell title="Task Statistics" size="large" />

      <van-cell v-if="isLoading">
        <template #title>
          <van-skeleton title :row="3" />
        </template>
      </van-cell>

      <template v-else>
        <van-cell>
          <template #title>
            <div class="stat-row">
              <span>Total Tasks</span>
              <span class="stat-value">{{ stats.total }}</span>
            </div>
          </template>
        </van-cell>

        <van-cell>
          <template #title>
            <div class="stat-row">
              <span>Completed</span>
              <span class="stat-value">
                {{ stats.completed }} ({{ stats.completion_rate }}%)
              </span>
            </div>
            <van-progress :percentage="stats.completion_rate" color="#07c160" />
          </template>
        </van-cell>

        <van-cell>
          <template #title>
            <div class="stat-row">
              <span>Pending</span>
              <span class="stat-value">{{ stats.pending }}</span>
            </div>
          </template>
        </van-cell>

        <van-cell v-if="stats.upcoming_due > 0">
          <template #title>
            <div class="stat-row">
              <span>Due in next 7 days</span>
              <span class="stat-value stat-warning">{{ stats.upcoming_due }}</span>
            </div>
          </template>
        </van-cell>

        <van-cell title="Priority Breakdown">
          <template #right-icon>
            <div class="priority-legend">
              <div class="legend-item">
                <div class="color-dot high"></div>
                <span>High</span>
              </div>
              <div class="legend-item">
                <div class="color-dot medium"></div>
                <span>Medium</span>
              </div>
              <div class="legend-item">
                <div class="color-dot low"></div>
                <span>Low</span>
              </div>
            </div>
          </template>
        </van-cell>

        <van-cell>
          <template #title>
            <div class="priority-chart">
              <div
                class="priority-bar high"
                :style="{ width: getPriorityPercentage(1) + '%' }"
                v-if="getPriorityCount(1) > 0"
              >
                {{ getPriorityCount(1) }}
              </div>
              <div
                class="priority-bar medium"
                :style="{ width: getPriorityPercentage(2) + '%' }"
                v-if="getPriorityCount(2) > 0"
              >
                {{ getPriorityCount(2) }}
              </div>
              <div
                class="priority-bar low"
                :style="{ width: getPriorityPercentage(3) + '%' }"
                v-if="getPriorityCount(3) > 0"
              >
                {{ getPriorityCount(3) }}
              </div>
            </div>
          </template>
        </van-cell>
      </template>
    </van-cell-group>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { showToast } from 'vant';
import { todoApi } from '../api';

const props = defineProps({
  refreshTrigger: {
    type: Number,
    default: 0
  }
});

// State
const stats = ref({
  total: 0,
  completed: 0,
  pending: 0,
  completion_rate: 0,
  priority_stats: {},
  upcoming_due: 0
});
const isLoading = ref(true);

// Methods
const fetchStats = async () => {
  isLoading.value = true;
  try {
    const data = await todoApi.getStats();
    stats.value = data;
  } catch (error) {
    showToast('Failed to load statistics');
    console.error('Error fetching stats:', error);
  } finally {
    isLoading.value = false;
  }
};

const getPriorityCount = (priority) => {
  return stats.value.priority_stats[priority] || 0;
};

const getPriorityPercentage = (priority) => {
  if (stats.value.total === 0) return 0;
  return Math.round((getPriorityCount(priority) / stats.value.total) * 100);
};

// Watch for refresh trigger
watch(() => props.refreshTrigger, () => {
  fetchStats();
});

// Fetch stats on mount
onMounted(() => {
  fetchStats();
});
</script>

<style scoped>
.stats-container {
  margin-bottom: 16px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-value {
  font-weight: 500;
}

.stat-warning {
  color: #ff976a;
}

.priority-legend {
  display: flex;
  gap: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.color-dot.high {
  background-color: #ee0a24;
}

.color-dot.medium {
  background-color: #ff976a;
}

.color-dot.low {
  background-color: #07c160;
}

.priority-chart {
  display: flex;
  height: 24px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 8px;
}

.priority-bar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 500;
  min-width: 24px;
}

.priority-bar.high {
  background-color: #ee0a24;
}

.priority-bar.medium {
  background-color: #ff976a;
}

.priority-bar.low {
  background-color: #07c160;
}
</style>
